<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>A系统怎么又登不上去啦？</title>
</head>
<style>
  /*@author Devilu*/
:root {
	/* 统一采用变量计算，更改元素大小不会影响布局 */
	--num_out_width: 50px;
	--num_out_height: 50px;
	--num_width: 32px;
	--num_height: 32px;
	--line_width: 105px;
}

#main_container {
	margin: 0 auto;
}

.num_out {
	width: var(--num_out_width);
	height: var(--num_out_height);
}

.num_blue {
	width: var(--num_width);
	height: var(--num_height);
	line-height: var(--num_height);
	text-align: center;
	margin: 0 auto;
	margin-top: calc((var(--num_out_height) - var(--num_height)) / 2);
	border-radius: 50%;
	background-color: #39f;
	color: #fff;
}

.num_gray_out {
	width: var(--num_out_width);
	height: var(--num_out_height);
	background-color: #d7d7d7;
	border-radius: 50%;
	line-height: var(--num_out_width);
	display: flex;
	display: -webkit-flex;
	align-items: center;
}


.num_gray {
	width: var(--num_width);
	height: var(--num_height);
	line-height: var(--num_height);
	text-align: center;
	margin: 0 auto;
	border-radius: 50%;
	background-color: #999;
	color: #fff;
}

.line_blue {
	margin-top: calc(var(--num_out_height) / 2);
	height: 1px;
	width: var(--line_width);
	background-color: #39f;
}

.line_gray {
	margin-top: calc(var(--num_out_height) / 2);
	height: 1px;
	width: var(--line_width);
	background-color: #d7d7d7;
}

#main_container>ul {
	list-style: none;
	display: flex;
	justify-content: center;
}

#main_container>.ul_word {
	margin-left: 15rem;
}

.ul_num>li {
	float: left;
	height: 38px;
}

#main_container>.content {
	margin: 80px auto 60px;
	width: 800px;
	display: flex;
	/* flex-direction: column; */
	justify-content: center;
}


.ul_word>li {
	float: left;
	width: calc(var(--num_out_width) + (var(--line_width) * 2));
}

.ul_word>li>p {
	display: block;
	width: fit-content;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	color: #666;
	font-size: 15px;
}

.clear {
	clear: both;
}

.follow_show ul li {
	display: none;
	list-style: none;
}

ul {
	padding: 0;
}

.follow_show .btn_li>div {
	display: flex;
	justify-content: center;
}

.follow_btn {
	width: 130px;
	height: 40px;
	background-color: #39f;
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 14px;
}

.loading {
	font-size: 20px;
	color: #FF6C00;
}

.loading:after {
	overflow: hidden;
	display: inline-block;
	vertical-align: bottom;
	-webkit-animation: ellipsis steps(8, end) 900ms infinite;
	animation: ellipsis steps(8, end) 900ms infinite;
	content: "\2026";
	width: 0px;
}

@keyframes ellipsis {
	to {
		width: 20px;
	}
}

@-webkit-keyframes ellipsis {
	to {
		width: 20px;
	}
}

.rd-box {
	display: flex;
	flex-direction: column;
	font-size: 24px;
}

.rd-reminder {
	display: flex;
	color: green;
	justify-content: center;
	font-weight: bold;
}

.rd-list {
	font-size: 20px;
	line-height: 40px;
	display: flex;
	flex-direction: column;
	padding: 20px;
	margin: 20px 0 -30px 230px;
}

.cache-sub-title{
	font-size: 18px;
    font-weight: 500;
    margin-left: 4px;
    margin-bottom: 10px;
}

.cache-box {
	display: flex;
	flex-direction: column;
}

.cache-box img {
	/* display: flex;
	align-items: center; */
	margin: 10px 0;
}

.cache-box .point {
	color: red;
	font-weight: 500;
	margin: 0 4px;
}

.question-box {
	margin-top: 80px;
}

.question-title {
	display: flex;
    justify-content: center;
    color: green;
    font-weight: bold;
    margin-bottom: 20px;
}

.question {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}

.answer {
  font-size: 16px;
}
</style>

<body>
  <div id="main_container">
    <ul class="ul_word">
      <li>
        <p> 浏览器检查 </p>
      </li>
      <li>
        <p> 内网环境检查 </p>
      </li>
      <li>
        <p> 清除缓存重试 </p>
      </li>
      <li>
        <p> 询问开发人员 </p>
      </li>
    </ul>
    <div class="clear"></div>
    <ul class="ul_num">
      <li>
        <div class="num_blue">1</div>
      </li>
      <li>
        <div class="line_blue"></div>
      </li>
      <li>
        <div class="line_gray"></div>
      </li>
      <li>
        <div class="num_gray_out">
          <div class="num_gray">2</div>
        </div>
      </li>
      <li>
        <div class="line_gray"></div>
      </li>
      <li>
        <div class="line_gray"></div>
      </li>
      <li>
        <div class="num_gray_out">
          <div class="num_gray">3</div>
        </div>
      </li>
      <li>
        <div class="line_gray"></div>
      </li>
      <li>
        <div class="line_gray"></div>
      </li>
      <li>
        <div class="num_gray_out">
          <div class="num_gray">4</div>
        </div>
      </li>
    </ul>
    <div class="clear"></div>
    <div class="content">
    </div>
    <div class="clear"></div>
    <div class="follow_show">
      <ul>
        <li class="btn_li">
          <div>
            <button class="next follow_btn">下一步</button>
          </div>
        </li>
        <li class="btn_li">
          <div>
            <button class="next follow_btn">下一步</button>
          </div>
        </li>
        <li class="btn_li">
          <div>
            <button class="next follow_btn">下一步</button>
          </div>
        </li>
        <!-- <li> 已经到底啦 </li> -->
      </ul>
    </div>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript">
    /*@author Devilu*/

    base_num = $(".ul_num li").eq(3);
    out_width = base_num.children().css("width").substring(0, base_num.children().css("width").length - 2)
    inner_width = base_num.children().children().css("width").substring(0, base_num.children().children().css("width")
      .length - 2)
    need_add = (out_width - inner_width) / 2

    base_line = $(".ul_num li").eq(1);
    line_width = base_line.children().css("width").substring(0, base_line.children().css("width").length - 2)

    new_line_width = Number(line_width) + Number(need_add)

    /** 设置字体居中	**/
    var ul_li_p_list = $(".ul_word li p")
    ul_li_p_list.each(function () {
      var width = $(this).css("width").substring(0, ($(this).css("width").length - 2))
      $(this).css({
        "margin-left": -(width / 4) + "px"
      })
    })

    function follow_show() {
      var last_blue_num = 0
      var ul_num_list = $(".ul_num li div");
      ul_num_list.each(function (index) {
        var c = $(this).attr("class")
        if (c == "num_blue" && index > last_blue_num) {
          last_blue_num = index
        }
      })
      var follow_show_list = $(".follow_show ul li")
      if (last_blue_num == 0) {
        follow_show_list.eq(last_blue_num).show()
      } else {
        pos = last_blue_num / 3
        follow_show_list.eq(pos - 1).hide()
        follow_show_list.eq(pos).show()
      }

    }

    follow_show()

    function next(current) {

      parent_li = $(current).parents("li")
      var index = $(".follow_show ul li").index(parent_li);
      pos = 3 * (index + 1)
      last_num = $(".ul_num li").eq(pos)
      last_num.prev().children().removeClass("line_gray").addClass("line_blue")

      last_num.prev().children().css({
        "width": new_line_width + "px"
      })
      last_num.children("div").remove();
      last_num.html(
        "<div class='num_blue'>" + (index + 2) + "</div>"
      );
      last_num.next().children().removeClass("line_gray").addClass("line_blue")
      last_num.next().children().css({
        "width": new_line_width + "px"
      })
      follow_show()
    }
  </script>
  <script type="text/javascript">
    $(document).ready(() => {
      document.title = "A系统怎么又登不上去啦？"
      handleDisplay(0);
    })

    $(".next").click(function () {
      next($(this));
      var parent_li = $(this).parents("li")
      var index = $(".follow_show ul li").index(parent_li);
      handleDisplay(index + 1);
    })

    function handleDisplay(index) {
      switch (index) {
        case 0:
          checkBrowserCore();
          break;
        case 1:
          checkPrivateNetwork();
          break;
        case 2:
          checkCache();
          break;
        case 3:
          askHelpForRD();
          break;
      }
    }

    function checkBrowserCore() {
      var agent = navigator.userAgent.toLowerCase();
      var tips = "";
      if (agent.indexOf("chrome") < 0) {
        tips = `
          <div style="display: flex; flex-direction: column;">
            <h2><span style="color: red;">请使用Chromium内核浏览器，例如：Chrome，新版Edge</span></h2>
            <div style="margin-bottom: 14px">Chrome下载地址：<a href="https://www.google.com/intl/zh-CN/chrome/">https://www.google.com/intl/zh-CN/chrome/</a></div>
            <div>新版Edge下载地址：<a href="https://www.microsoft.com/zh-cn/edge?form=MA13DE&OCID=MA13DE">https://www.microsoft.com/zh-cn/edge?form=MA13DE&OCID=MA13DE</a></div>
          </div>
        `;
        disableBtn()
      } else {
        tips = "<h2><span style=\"color: green;\">当前浏览器支持</span>，如还不能访问请查看下一步</h2>"
      }
      $(".content").html(tips);
    }

    function checkPrivateNetwork() {
      var img = new Image();
      var ts = new Date().getTime();
      img.src = "https://a.baijiahulian.com/favicon.ico?ts=" + ts;

      $('.content').html("<div class=\"loading\">内网环境检测中</div>")
      var tips = ""
      var err = false
      img.onerror = function() {
        $('.loading').remove()
        tips = "<h2><span style=\"color: red;\">内网环境检测失败</span>，请确认VPN是否开启</h2>";
        disableBtn()
        err = true
        $('.content').html(tips)
      }
      setTimeout(() => {
        if (err) return;
        $('.loading').remove()
        if (img.complete) {
          tips = "<h2><span style=\"color: green;\">内网环境检测通过</span>，如还不能访问请查看下一步</h2>";
        } else {
          tips = "<h2><span style=\"color: red;\">内网环境检测失败</span>，请确认VPN是否开启</h2>";
          disableBtn()
        }
        $('.content').html(tips)
      }, 2000);
    }

    function checkCache() {
      tips = `
        <div class="cache-box">
          <div class="section">
            <h2 class="cache-title">1. 清除浏览器数据</h2>
              <div>
                点击浏览器右上角的<span class="point">三个小点 (菜单)</span>
              ，再点击<span class="point">更多工具</span>中的<span class="point">清除浏览器数据</span>
              </div>
              <img src="https://i.loli.net/2020/10/29/AUcuf19K7Nxhzk5.png">
              <div>
               点击<span class="point">立即清除<span>
              </div>
              <img src="https://i.loli.net/2020/10/29/OlCeJcL7fZ9jNqx.png">
          </div>

          <div class="section">
            <h2 class="cache-title">2. 重新进入A系统</h2>
              <div>
                <h3><span style="color: red;margin-left: 28px;">如果还不能进入A系统</span>，点击下一步</h3>
              </div>
          </div>
        </div>
      `
      $('.content').html(tips)
    }

    function askHelpForRD() {
      tips = `
        <div class="rd-box">
          <div class="rd-reminder">请联系A系统开发人员</div>
          <div class="rd-list">
            <div>黄建新 -- @huangjianxin</div>
            <div>谭易鹏 -- @tanyipeng</div>
            <div>林珂晅 -- @linkexuan</div>
            <div>汪晓兵 -- @wangxiaobing</div>
            <div>李文轩 -- @liwenxuan01</div>
          </div>

          <div class="question-box">
            <div class="question-title">常见问题</div>
            <div>
              <div class="question">Q1: 进入登录页面登录成功后，页面空白？</div>
              <div class="answer">登陆A系统，账号不需要加@baijiahulian.com哈，比如abc@baijiahulian.com，账号只需要输入abc即可。</div>
            </div>
          </div>
        </div>
      `
      $('.content').html(tips)
    }

    function disableBtn() {
      $('button').attr('disabled', true);
      $('button').css('background-color', '#f3bbc8');
      $('button').css('cursor', 'not-allowed');
    }
  </script>
</body>

</html>
